<template>
  <el-scrollbar class="scrollbar">
    <div
      :class="['list', { active: activeId === item.needDealId }]"
      v-for="(item, index) in dataList"
      :key="item.id"
      @click="changeActive(item, index)">
      <div class="tit">{{ item.title }}</div>
      <div class="brief">
        <div class="type">{{ item.label }}</div>
        <div class="time">{{ item.createTime }}</div>
      </div>
    </div>
  </el-scrollbar>
</template>

<script>
export default {
  name: 'AppraistPageType',
  components: {},
  props: {
    // 评价类型  待评议：apply、已评议：applied
    evaluateType: {
      type: String,
      default: 'apply',
    },
    dataList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      activeId: '0',
    }
  },
  computed: {},
  watch: {
    dataList(now) {
      if (now.length) {
        this.activeId = now[0].needDealId
        this.$emit('commentChange', 0)
      }
    },
  },
  created() {},
  mounted() {
    if (this.dataList.length) {
      this.activeId = this.dataList[0].needDealId
      this.$emit('commentChange', 0)
    }
  },
  methods: {
    changeActive({ needDealId }, index) {
      if (this.activeId === needDealId) return
      this.activeId = needDealId
      this.$emit('commentChange', index)
    },
  },
}
</script>

<style lang="scss" scoped>
.scrollbar {
  height: 100%;
  width: 100%;
  border-right: 1px solid #e5e5e5;
  .list {
    font-size: 14px;
    padding: 10px 20px;
    border-bottom: 1px solid #e5e5e5;
    cursor: pointer;
    .tit {
      font-weight: 600;
      color: #333;
      margin: 10px 0;
    }
    .brief {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      .type {
        border-radius: 12px;
        background-color: rgba($color: #004db6, $alpha: 0.1);
        padding: 2px 10px;
        color: #1852a3;
      }
    }
    &.active {
      background-color: #5a96e93b;
      // box-shadow: 1px 2px 12px 1px rgba(0, 0, 0, 0.3);
    }
  }
}
</style>
